<!-- 分页 -->
<template>
<div>
     <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="Pnumber"   
                    :small='small'
                    :page-sizes="[10, 20, 30, 40, 50, 60, 70, 80]"
                    :page-size="Bnumber"
                    :layout="layout_one"
                    :total="addNum">
         </el-pagination>
</div>
</template>

<script>
export default {
    props:{
        addNum:{
            type:Number
        }
    },
data() {
return {
 Bnumber:10,//每页条数
 Pnumber:1,//当前页数
 layout_one:'total, sizes, prev, pager, next, jumper',//分页布局
 small:false,//是否使用小型分页样式
}
},
//生命周期 - 创建完成（访问当前this实例）
created() {
   this.$emit('Listdata',{
       Bnumber:this.Bnumber,
       Pnumber:this.Pnumber
   })
},
//生命周期 - 挂载完成（访问DOM元素）
mounted() {
  
},
methods:{
    //点击条数事件
      handleSizeChange(val) {
        this.Bnumber = val;
        this.$emit('Listdata',{
       Bnumber:this.Bnumber,
       Pnumber:this.Pnumber
   })
      },
      //点击页数事件
      handleCurrentChange(val) {
        this.Pnumber = val;
        this.$emit('Listdata',{
       Bnumber:this.Bnumber,
       Pnumber:this.Pnumber
   })
      }
},
computed:{
     clientWidth(){
				return this.$store.getters.cwidth;//当前页面宽度
			}
},
watch:{
    //分页适配
  clientWidth(newVal){
      console.log(newVal)
      if(newVal>700 && newVal <= 888){
					this.layout_one = 'sizes, prev, pager, next, jumper';
                } else if( newVal>580 &&newVal <= 700){
                    this.layout_one = 'sizes,prev, pager, next,jumper';
                    this.small = true;
                }else if(newVal <= 580){
                    this.layout_one = 'prev, pager, next,sizes';
                    this.small = true;
                }else{
					 this.layout_one = 'total, sizes, prev, pager, next, jumper';
                    this.small = false;
                };
  }  
}
}
</script>
<style scoped>
/* @import url(); 引入css类 */

</style>